<template>
  <div style="padding-top: -10px;">
    <a-popover trigger="hover" title="视频预览" placement="right" width="600" @visibleChange="popVisiableChange">
      <a-input v-model="videoUrl" placeholder="可直接填入视频地址" :style="{width: width}" clearable @change="inputChange"/>
      <div slot="content" v-if="videoUrl">
        <video id="video" ref="video" :src="videoUrl" width="550" height="400" controls="true"></video>
      </div>
      <a-upload
        :action="api.file.upload"
        :headers="accessToken"
        accept=".mp4"
        :data="data"
        :beforeUpload="beforeUpload"
        @change="handleChange"
        :showUploadList="false"
        ref="up"
        class="upload"
      >
        <a-button :loading="loading" icon="ios-cloud-upload-outline" style="clear:both">{{btnText}}</a-button>
      </a-upload>
    </a-popover>
    <p>文件大小不超{{fileMaxSize}}{{sizeUnit}}</p>
  </div>
</template>

<script>
  import Vue from 'vue'

  export default {
    name: 'UploadVideo',
    model: {
      prop: 'value',
      event: 'change.value'
    },
    props: {
      width: {
        type: String,
        default: '250px'
      },
      fileSize: {
        default: 204800
      },
      value: {
        type: [String, Array],
        default: ''
      }
    },
    computed: {
      fileMaxSize: {
        get: function() {
          if (this.fileSize >= 1024 && this.fileSize < 1048576) {
            this.sizeUnit = 'M'
            return Number(this.fileSize / 1024).toFixed(2)
          }
          if (this.fileSize >= 1048576) {
            this.sizeUnit = 'G'
            return Number(this.fileSize / 1024 / 1024).toFixed(2)
          } else {
            this.sizeUnit = 'KB'
            return this.fileSize
          }
        }
      }
    },
    watch: {
      value(value) {
        console.info('视频地址：', value)
        if (value != '' && typeof value == 'string') {
          this.videoUrl = value
        }
      }
    },
    data() {
      return {
        accessToken: {},
        sizeUnit: 'KB',
        data: {
          fileType: 'video'
        },
        videoUrl: '',
        fileId: '',
        removeIds: [],
        format: ['mp4'],
        accept: '.mp4',
        loading: false,
        viewImage: false,
        btnText: '选择文件'
      }
    },
    methods: {
      init() {
        const token = Vue.ls.get('Access-Token')
        this.accessToken = {
          Authorization:  token
        }
      },
      handleFormatError(file) {
        this.loading = false
        this.$notification.warning({
          title: '不支持的文件格式',
          desc: '所选文件‘ ' + file.name + ' ’格式不正确, 请选择' + this.accept + '格式文件'
        })
      },
      handleMaxSize(file) {
        this.loading = false
        this.$notification.warning({
          title: '文件大小过大',
          desc: '所选文件‘ ' + file.name + ' ’大小过大,不得超过' + this.fileMaxSize + this.sizeUnit
        })
      },
      beforeUpload() {
        this.loading = true
        this.btnText = '上传中...'
        this.$emit('on-before')
        return true
      },
      handleError(error, file, fileList) {
        this.loading = false
        this.$message.error(error.toString())
      },
      inputChange(e) {
        this.videoUrl = e.target.value
        this.$emit('change', this.videoUrl)
      },
      handleChange({ file, fileList, event }) {
        if (file.status != 'uploading') {
          let videoUrl = ''
          if (file.response) {
            videoUrl = file.response.data.url
            this.fileId = file.response.data.uid
            this.btnText = '上传文件'
            this.loading = false
          }
          if (file.status == 'removed') {
            if (file.response) {
              this.removeIds.push(file.response.data.uid)
            } else {
              this.removeIds.push(file.uid)
            }
          }
          this.$emit('change', videoUrl, file, this.fileId, this.removeIds)
        }
      },
      popVisiableChange(visible) {
        if (this.videoUrl != '') {
          if (visible == true) {
            setTimeout(() => {
              this.$refs.video.play()
            }, 1000)

          } else {
            this.$refs.video.pause()
          }
        }
      }
    },
    created() {

      this.init()
      if (this.value) {
        this.videoUrl = this.value
      }
    }
  }
</script>

<style lang="less">
  .upload {
    display: inline-block;
    margin-left: 10px;
  }
</style>

